/**
 * 主页面
 * @author xiaoxujs
 */
import { useEffect } from "react";
import { GlobalStyle } from "./style";
import { ConfigProvider } from "antd";
import locale from "antd/locale/zh_CN";
import {  Route, BrowserRouter as Router, Routes } from "react-router-dom";

import Login from "./pages/Login";
import Home from "./pages/Home";

import UserRoutes from "./router";
import { IconGlobalStyle } from "./assets/iconfont/iconfont";
import { useWindowFontSize } from "./assets/fun/Antd/configprovider";

import dayjs from 'dayjs';

import 'dayjs/locale/zh-cn';
import LaneMonitoring from "./pages/LaneMonitoring";
import ZhuangcheDaping from "./pages/ZhuangcheDaping";

dayjs.locale('zh-cn');

function App() {
  useEffect(() => {
    const resizeListener = () => {
      // 定义设计图的尺寸 1920
      let designSize = 1920;
      // 获取 html 元素
      let html = document.documentElement;
      // 定义窗口的宽度
      let clientW = html.clientWidth;
      // html 的fontsize 大小
      let htmlRem = clientW * 10 / designSize;
      html.style.fontSize = htmlRem + 'px';
    }
    resizeListener()
    window.addEventListener('resize', resizeListener);

    return () => {
      window.removeEventListener('resize', resizeListener);
    }
  }, [])
  return (
    <div className="App">
      <GlobalStyle />
      <IconGlobalStyle />
      <ConfigProvider
          locale={locale}
          theme={{
            token: {
              fontSize: useWindowFontSize(14),
              borderRadius: useWindowFontSize(4),
              controlHeight: useWindowFontSize(35)
            },
            components: {
              Button: {
                controlHeight: useWindowFontSize(36),
                borderRadius: useWindowFontSize(4),
                contentFontSize: useWindowFontSize(14),
                onlyIconSize: useWindowFontSize(16),
                paddingBlock: useWindowFontSize(4),
                paddingInline: useWindowFontSize(15),
              },
              Input: {
                controlHeight: useWindowFontSize(35),
                borderRadius: useWindowFontSize(4),
                inputFontSize: useWindowFontSize(14),
                // paddingBlock: useWindowFontSize(4),
                // paddingInline: useWindowFontSize(11),
              },

              InputNumber: {
                controlHeight: useWindowFontSize(35),
                borderRadius: useWindowFontSize(4)
              },
              Select: {
                controlHeight: useWindowFontSize(35),
                borderRadius: useWindowFontSize(4),
                optionFontSize: useWindowFontSize(14),
                fontSize: useWindowFontSize(14),
              },
              Table: {
                cellFontSize: useWindowFontSize(14),
                cellPaddingBlock: useWindowFontSize(7),
                cellPaddingInline: useWindowFontSize(7),
                headerBorderRadius: useWindowFontSize(8),
                selectionColumnWidth: useWindowFontSize(32),
                // cellPaddingInline
              },
              Pagination: {
                itemSize: useWindowFontSize(32)
              },
              Image: {
                zIndexPopup: 2000
              }
            }
          }}
        >
            <Router basename="/">
              <Routes>
                <Route path="/" element={<Login />} />
                <Route path="/home" element={<Home />} />
                <Route path="/laneMonitoring" element={<LaneMonitoring />} />
                <Route path="/auxiliaryVehicle" element={<ZhuangcheDaping />} />
                {UserRoutes()}
              </Routes>
            </Router>
        </ConfigProvider>
    </div>
  );
}

export default App;
